import React from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import { TabBar } from 'antd-mobile'

function Tabbar() {
    const navigate=useNavigate();
    const pathname=useLocation();
  return (
    <div activekey={pathname}>
      <Outlet></Outlet>
      <TabBar style={{position:"fixed", bottom:"0",width:"100%", height:"50px", background:"#fff"}} onChange={(key)=>navigate(key)}>
        <TabBar.Item key={'/'} title={"首页"}></TabBar.Item>
        <TabBar.Item key={'/kind'} title={"分类"}></TabBar.Item>
        <TabBar.Item key={'/chat'} title={"客服"}></TabBar.Item>
      </TabBar>
    </div>
  )
}

export default Tabbar
